<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>箭头函数基础语法</title>
    <script crossorigin src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script crossorigin src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script crossorigin src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

   <div id="example"></div>
   <script type="text/babel">
       // (param1, param2, …, paramN) => { statements }
       // (param1, param2, …, paramN) => expression
       // // equivalent to: => { return expression; }
       //
       // // Parentheses are optional when there's only one parameter name:
       // (singleParam) => { statements }
       // singleParam => { statements }
       //
       // // The parameter list for a function with no parameters should be written with a pair of parentheses.
       // () => { statements }
       // 箭头函数基础语法
       function baseSynatx() {
           var materials = [
               '刘子彬',
               'abcdefg',
               '123'
           ];
           //方式一
           // console.log(materials.map(
           //     (material) => {
           //         return material.length
           //     })
           // );

           //方式二
           console.log(materials.map(mm => mm.length));

           //方式三
           console.log(materials.map(
               function (mm) {
                   return mm.length;
               }
           ));
       }

       baseSynatx();

       ReactDOM.render(
          <h1>箭头函数</h1>,
           document.getElementById('example')
       );
   </script>

</body>
</html>